<template>
  <div class="profile">
    <Topbar :gobackEnabled="true" :title="title"/>

    <section class="profile-info">
      <router-link class="profile-link" :to="userInfo ? '/profile/info' : '/login'">
        <img class="avatar-icon" v-if="userInfo" :src="imgBaseUrl + userInfo.avatar">
        <span class="avatar-icon" v-else>
          <svg>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
          </svg>
        </span>

        <div class="profile-mobile">
          <p>{{userName}}</p>
          <p>
            <span class="mobile-icon">
              <svg fill="#fff">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
              </svg>
            </span>
            <span class="mobile-number">{{mobile}}</span>
          </p>
        </div>

        <span class="arrow">
          <svg fill="#fff">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
          </svg>
        </span>
      </router-link>
    </section>

    <section class="profile-account" v-if="userInfo">
      <ul class="clear">
        <router-link tag="li" to="/balance">
          <span class="data-value">
            <b>{{parseInt(userInfo.balance).toFixed(2)}}</b>元
          </span>
          <span class="data-label">我的余额</span>
        </router-link>

        <router-link tag="li" to="/benefit">
          <span class="data-value">
            <b>{{userInfo.gift_amount}}</b>个
          </span>
          <span class="data-label">我的优惠</span>
        </router-link>

        <router-link tag="li" to="/points">
          <span class="data-value">
            <b>{{userInfo.point}}</b>分
          </span>
          <span class="data-label">我的积分</span>
        </router-link>
      </ul>
    </section>

    <section class="profile-menus" v-if="userMenus">
      <router-link class="menu-item" v-for="(menu, i) in userMenus" :key="i" :to="menu.path">
        <aside>
          <svg :fill="menu.iconColor">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="menu.iconName"></use>
          </svg>
        </aside>
        <div class="menu-text">
          <span>{{menu.text}}</span>
          <span class="menu-arrow">
            <svg fill="#bbb">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </div>
      </router-link>
    </section>

    <section class="profile-menus">
      <router-link class="menu-item" to="/service">
        <aside>
          <svg fill="#4aa5f0">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use>
          </svg>
        </aside>
        <div class="menu-text">
          <span>服务中心</span>
          <span class="menu-arrow">
            <svg fill="#bbb">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </div>
      </router-link>

      <router-link class="menu-item" to="/download">
        <aside>
          <svg fill="#3cabff">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
          </svg>
        </aside>
        <div class="menu-text" style="border-bottom:0;">
          <span>下载饿了么APP</span>
          <span class="menu-arrow">
            <svg fill="#bbb">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </div>
      </router-link>
    </section>

    <section class="logout-box" v-if="userInfo">
      <div class="button" @click="doLogout">退出登录</div>
    </section>

    <BottomNav/>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Topbar from '../../components/Topbar';
import BottomNav from '../../components/BottomNav';
import { mapState, mapActions } from 'vuex';
import { imgBaseUrl } from '../../etc/config';
export default {
  data() {
    return {
      title: '我的',

      userName: '登录/注册', //用户名
      mobile: '暂无绑定手机号', //电话号码

      userMenus: null,

      imgBaseUrl,
      end: null
    };
  },
  beforeMount() {
    this.initUserInfo();
    this.initData();
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['initUserInfo', 'logout']),
    initData() {
      let userInfo = this.userInfo;
      if (userInfo) {
        this.userName = userInfo.username;
        this.mobile = userInfo.mobile || this.mobile;

        const newItem = (path, text, iconName, iconColor) => ({
          path,
          text,
          iconName,
          iconColor
        });

        this.userMenus = [
          newItem('/order', '我的订单', '#order', '#4aa5f0'),
          newItem('/point', '积分商城', '#point', '#fc7b53'),
          newItem('/vipcard', '饿了么会员卡', '#vip', '#ffc636')
        ];
      }
    },
    doLogout() {
      this.logout(this);
    }
  },
  components: {
    Topbar,
    BottomNav
  }
};
</script>

<style lang="scss">
@import '../../styles/mixin';
.profile {
  .profile-info {
    .profile-link {
      display: block;
      display: flex;
      box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background: $blue;
      padding: 0.666667rem 0.6rem;

      .avatar-icon {
        display: inline-block;
        @include wh(2.5rem, 2.5rem);
        border-radius: 50%;
        vertical-align: middle;
        svg {
          background: $fc;
          border-radius: 50%;
          @include wh(2.5rem, 2.5rem);
        }
      }

      .profile-mobile {
        margin-left: 0.48rem;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        p {
          font-weight: 700;
          @include sc(0.8rem, $fc);
          .mobile-icon {
            @include wh(0.5rem, 0.75rem);
            display: inline-block;
            vertical-align: middle;
            line-height: 0.75rem;
            svg {
              @include wh(100%, 100%);
            }
          }
          .mobile-number {
            display: inline-block;
            margin-left: 0.2rem;
            @include sc(0.57333rem, $fc);
          }
        }
      }

      .arrow {
        @include wh(0.46667rem, 0.98rem);
        display: inline-block;
        svg {
          @include wh(100%, 100%);
        }
      }
    }
  }

  .profile-account {
    width: 100%;
    background: $fc;
    box-sizing: border-box;
    ul {
      li {
        float: left;
        width: 33.33%;
        display: inline-block;
        border-right: 1px solid #f1f1f1;
        span {
          display: block;
          width: 100%;
          text-align: center;
        }

        .data-value {
          @include sc(0.55rem, #333);
          padding: 0.853333rem 0 0.453333rem;
          b {
            display: inline-block;
            @include sc(1.2rem, #f90);
            font-weight: 700;
            line-height: 1rem;
            font-family: Helvetica Neue, Tahoma;
          }
        }

        .data-label {
          @include sc(0.57333rem, #666);
          font-weight: 400;
          padding-bottom: 0.453333rem;
        }
      }

      li:nth-of-type(2) {
        .data-value {
          b {
            color: #ff5f3e;
          }
        }
      }
      li:nth-of-type(3) {
        border: 0;
        .data-value {
          b {
            color: #6ac20b;
          }
        }
      }
    }
  }

  .profile-menus {
    margin-top: 0.4rem;
    background: $fc;

    .menu-item {
      padding-left: 1.6rem;
      display: flex;
      align-items: center;
      aside {
        @include wh(0.7rem, 0.7rem);
        margin-left: -0.866667rem;
        margin-right: 0.266667rem;
        display: flex;
        align-items: center;
        svg {
          @include wh(100%, 100%);
        }
      }
      .menu-text {
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.433333rem 0.266667rem 0.433333rem 0;
        @include sc(0.7rem, #333);
        display: flex;
        justify-content: space-between;
        span {
          display: block;
        }
        .menu-arrow {
          @include wh(0.46667rem, 0.466667rem);
          svg {
            @include wh(100%, 100%);
          }
        }
      }
    }
  }

  .logout-box {
    box-sizing: border-box;
    padding: 0.4rem 0.2rem;
    .button {
      text-align: center;
      width: 100%;
      padding: 0.3rem 0;
      background: $blue;
      color: #eee;
    }
  }
}

.profile {
  .router-slid-enter-active,
  .router-slid-leave-active {
    transition: all 0.4s;
  }
  .router-slid-enter,
  .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
}
</style>